<script lang="ts" setup>
import {
  CAN_CHANGE_LANGUAGE,
  VITE_LANGUAGE_SESSION_NAME,
  VITE_LOCALE_LANGUAGE,
} from "@/config";
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";

const localLang = ref<string>(
  sessionStorage.getItem(VITE_LANGUAGE_SESSION_NAME) ||
    VITE_LOCALE_LANGUAGE ||
    "en"
);

const { locale } = useI18n();
watch(localLang, (val) => {
  locale.value = val;
  sessionStorage.setItem(VITE_LANGUAGE_SESSION_NAME, val);
});
</script>

<template>
  <div
    v-if="CAN_CHANGE_LANGUAGE"
    class="fixed right-8 flex items-center justify-center space-x-2 absolute top-5"
  >
    <span class="i-clarity:language-solid w-6 h-6 text-white"></span>
    <a-switch
      v-model:checked="locale"
      checked-children="中"
      checked-value="zh"
      un-checked-children="EN"
      un-checked-value="en"
    >
    </a-switch>
  </div>
</template>
